<template>
	<el-form ref="formRef" :model="formData" label-width="150px" v-loading="loading">
		<el-form-item label="secretId：" prop="secretId">
			<div class="w-80">
				<el-input v-model.trim="formData.secretId" placeholder="请输入secretId" />
			</div>
		</el-form-item>
		<el-form-item label="secretKey：" prop="secretKey">
			<div class="w-80">
				<el-input v-model.trim="formData.secretKey" placeholder="请输入secretKey" />
			</div>
		</el-form-item>
		<el-form-item label="app_id：" prop="appId">
			<div class="w-80">
				<el-input v-model.trim="formData.appId" placeholder="请输入app_id" />
			</div>
		</el-form-item>
		<el-form-item label="短信签名：" prop="signName">
			<div class="w-80">
				<el-input v-model.trim="formData.signName" placeholder="请输入短信签名" />
			</div>
		</el-form-item>
        <el-form-item label="状态：">
			<el-radio-group v-model="formData.status">
				<el-radio :label="1">开启</el-radio>
				<el-radio :label="0">关闭</el-radio>
			</el-radio-group>
		</el-form-item>
	</el-form>
	<footerSubmit>
		<el-button v-auth="'setting/sms/edit'" type="primary" @click="handleSubmit">保存</el-button>
	</footerSubmit>
</template>

<script lang="ts" setup name="messageTencentEdit">
import { ref, reactive, onMounted } from 'vue';
import { smsDetail, smsEdit } from '/@/api/setting/sms';
import { messageSuccess } from '/@/utils/message';

const formRef = ref(null);

const loading = ref(true);

const identify = 'tencent';

// 表单数据
const formData = reactive({
	identify: identify,
	secretId: '',
	secretKey: '',
	appId: '',
	signName: '',
    status: 1
});

// 获取数据
const getData = async () => {
	const res = await smsDetail({ identify: identify });
	const data = res?.params;

	for (const key in formData) {
		if (data[key] != null && data[key] != undefined) {
			formData[key] = data[key];
		}
	}
    loading.value = false;
};

// 保存提交
const handleSubmit = async () => {
	await smsEdit(formData);
	messageSuccess('设置成功');
	getData();
};

onMounted(() => {
	getData();
});
</script>
